<template>
  <view class="header" v-if="hasSlider">
    <view class="switch" @click="onSwitchDisplay">
      <image class="icon" mode="widthFix" src="@/assets/icon-switch.png" />
      切换
    </view>
  </view>

  <template v-if="displayType != 'slider'">
    <view class="range-input">
      <clearable class="input-clearable" float :value="modelValue?.[0]" @clear="onChange('', 0)">
        <input
          class="input"
          placeholder="最低值"
          type="number"
          :value="modelValue?.[0]"
          @input="onChange($event.detail.value, 0)"
        />
      </clearable>
      -
      <clearable class="input-clearable" float :value="modelValue?.[1]" @clear="onChange('', 1)">
        <input
          class="input"
          placeholder="最高值"
          type="number"
          :value="modelValue?.[1]"
          @input="onChange($event.detail.value, 1)"
        />
      </clearable>
    </view>
    <grid-select
      v-if="hasSelect"
      class="range-select"
      :options="props.config!.select!.map(e => ({label: e.name, value: [e.start, e.end].join(',')}))"
      :columns="3"
      :modelValue="modelValue?.join(',')"
      @change="onQuickSelected"
    ></grid-select>
  </template>

  <range-slider
    v-if="displayType == 'slider'"
    :model-value="props.modelValue"
    @update:modelValue="onSliderChange"
    :min="props.config?.slider?.min"
    :max="props.config?.slider?.max"
  ></range-slider>
</template>

<script lang="ts" setup>
import Clearable from '@/components/clearable/index.vue';
import GridSelect from '@/components/grid-select/index.vue';
import RangeSlider from '@/components/range/range-slider-ex.vue';
import { computed, onMounted, ref, watch } from 'vue';

const props = defineProps<{
  modelValue?: [number?, number?];
  config?: {
    slider?: {
      min: number;
      max: number;
    };
    select?: { name: string; start?: number; end?: number }[];
  };
  show: boolean;
}>();

console.log(props.show);


const emits = defineEmits<{
  (event: 'update:modelValue', value: (number | undefined)[] | undefined): void;
  (event: 'switchDisplay', value: string): void;
  (event: 'change', value: (number | undefined)[] | undefined): void;
}>();

const displayType = ref<'slider' | 'input'>('input');

const hasSlider = computed(() => {
  return !!props.config?.slider;
});

const hasSelect = computed(() => {
  return props.config?.select && props.config?.select.length;
});

onMounted(() => {
  if (hasSlider.value) {
    if (
      !props.modelValue ||
      (props.modelValue[0] == undefined && props.modelValue[1] == undefined)
    ) {
      displayType.value = 'slider';
    }
  }
});

watch(displayType, (now, old) => {
  // FIXME 此处在首次挂载组件时会触发一次change

  if (now == 'input') {
    changeValue(undefined);
  } else {
    changeValue([undefined, undefined]);
  }
});

const changeValue = (value: (number | undefined)[] | undefined) => {
  emits('update:modelValue', value);
  emits('change', value);
};

const onSwitchDisplay = () => {
  if (hasSlider.value) {
    if (displayType.value == 'slider') {
      displayType.value = 'input';
    } else {
      displayType.value = 'slider';
    }
  }

  emits('switchDisplay', displayType.value);
};

const onChange = (v: string, idx: number) => {
  let num: number | undefined = Number(v);
  if (v == undefined || v.length == 0 || isNaN(num)) {
    num = undefined;
  }

  let newValue: (number | undefined)[] | undefined;

  if (idx == 0) {
    newValue = [num, props.modelValue?.[1]];
  } else {
    newValue = [props.modelValue?.[0], num];
  }

  // 空数组处理成undefined
  if (newValue.every((e) => e == undefined)) {
    newValue = undefined;
  }
  changeValue(newValue);
};

const onQuickSelected = (value: any) => {
  if (value) {
    changeValue(
      value
        .split(',')
        .map((e) => (e == undefined || e.length == 0 || isNaN(e) ? undefined : Number(e))),
    );
  } else {
    changeValue(undefined);
  }
};

const onSliderChange = (value: number[]) => {
  changeValue(value);
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
  .switch {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #575757;
    .icon {
      width: 12px;
    }
  }
}

.range-input {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 16px;

  .input-clearable {
    // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #F8F9FB;
    font-size: 24rpx;
    height: 82rpx;
    border-radius: 10rpx;
    flex: 1;
    .input {
      text-align: center;
      height: 82rpx;
      font-size: 24rpx;
    }
  }
}

.range-select {
  margin-top: 14px;
}
</style>
